<template>
    <div class="header-page">
        <div class="container">
            <div class="header-main">
                <a href="/" class="header-logo">
                    <img class="logo" src="@/assets/logo/logo_all.png" alt="">
                </a>
                <div class="header-right">
                    <div class="header-pc">
                        <div class="header-list">
                            <div v-for="(item, index) in list" :key="index" class="header-item"
                                :class="{ on: index == check }">
                                <a :href="item.href" class="header-li">
                                    <span>{{ item.title }}</span>
                                </a>
                                <!-- 下拉栏 -->
                                <div v-if="item.children && item.children.length" class="header-child">
                                    <div class="vchild-main">
                                        <a :href="citem.href" v-for="(citem, cindex) in item.children" :key="cindex"
                                            class="vchild-li">
                                            {{ citem.title }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="header-loginbox">
                            <a href="/login" class="loginbox-item flex-center">
                                登录
                            </a>
                            <a href="/register" class="loginbox-item flex-center">
                                注册
                            </a>
                            <a href="/admin" class="loginbox-btn flex-center">
                                管理控制台
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    check: {
        type: [String, Number],
        default: '',
    },
})
const data = reactive({
    list: [
        {
            title: '首页',
            href: '/',
            children: []
        },
        {
            title: '产品中心',
            href: '/product',
            children: []
        },
        {
            title: '关于我们',
            href: '/about',
            children: [
                // {
                //     title: '公司介绍',
                //     href: '/about',
                // },
                // {
                //     title: '管理团队',
                //     href: '/teacher',
                // },
                // {
                //     title: '公司荣誉',
                //     href: '/honer',
                // },
                // {
                //     title: '资质证明',
                //     href: '/aptitude',
                // },
                // {
                //     title: '公司动态',
                //     href: '/news',
                // }
            ]
        },
        {
            title: '联系我们',
            href: '/contact',
            children: []
        }
    ],
    slide: 0
});


const { list, slide } = toRefs(data);

</script>

<style scoped lang="scss"></style>
